﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div class="lazy">
        <img src="~/Content/loading.jpg" data-original="/Content/bmw_m1_hood.jpg" />
        <img src="~/Content/loading.jpg" data-original="/Content/bmw_m1_side.jpg" />
        <img src="~/Content/loading.jpg" data-original="/Content/bmw_m3_gt.jpg"/>
        <img src="~/Content/loading.jpg" data-original="/Content/corvette_pitstop.jpg" />
    </div>
</body>
</html>
<script src="~/scripts/jquery-1.8.0.min.js"></script>
<script src="~/scripts/jquery.lazyload.min.js"></script>
<script>
    $(function () {
        $(".lazy img").lazyload({
            effect: "fadeIn",
            failure_limit: 10,
            skip_invisible: false
        }).trigger("appear");
    });

   
</script>